<template>
	<view class="zbox">
		<view class="topBox">
			<view class="box1">
				<p class="ptext">{{year}}年{{month}}月</p>
				<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<button @click="selectMont">选择月份</button>
				</picker>
			</view>
			<view class="scrollBox">
				<scroll-view class="scrollz" :style="{width:scrollWidth}" @scroll="scrollHandler(event)" scroll-x="true"
					scroll-left="120" scroll-with-animation="true">
					<view class="ss">
						<view class="scrollCard" v-for="el in haveDay" :key="el">
							<view class="num">{{el==toDay?'今':el}}</view>
							<view class="cirle">
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<view class="menu">
			<view class="menuCard" v-for="el in menuList" :key="el.id" @click="menuHandler(el)">
				<view class="mc" :style="{borderColor:el.status===true?'#409EFF':'#f0f0f0'}">
					{{el.title}} {{el.num}}
				</view>
			</view>
		</view>
		<view class="list">
			<view class="listCard" v-for=" item in listData" :key="item.id">
				<view class="">
					<h2>{{item.title}}</h2>
					<view class="timeBox">
						<view class="">
							开始时间：{{item.startDate}}
						</view>
						<view class="stb"
							:style="{color:item.status===0?'#afafaf':'#ffaa00',borderColor:item.status===0?'#afafaf':'#ffaa00'}">
							{{item.status===0?'未超时':'超时'}}
						</view>
					</view>
					<view style="font-size: 0.8rem;color:#afafaf ;">
						负责人：{{item.leader}}
					</view>
				</view>
				<view class="" style="font-size: 1.2rem;">
					{{item.score===undefined?'':`${item.score}分`}}
				</view>
			</view>
		</view>
		<!--  -->
		<!--  <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
		            <picker-view-column>
		                <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
		            </picker-view-column>
		            <picker-view-column>
		                <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
		            </picker-view-column>
		        </picker-view> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	const date = ref('')
	const bindDateChange = (e) => {
		year.value = e.detail.value.slice(0, 4)
		month.value = e.detail.value.slice(-2)
		haveDay.value = getDaysInMonth(e.detail.value)
	}
	const menuList = ref([{
		id: 1,
		title: '待完成',
		num: 2,
		status: true,
		data: [{
			id: 1,
			title: '任务1',
			startDate: '18：00',
			status: 0,
			leader: '韩朵朵'
		}, {
			id: 2,
			title: '任务2',
			startDate: '19：00',
			status: 1,
			leader: '韩朵朵'
		}, ]
	}, {
		id: 2,
		title: '已完成',
		num: 2,
		status: false,
		data: [{
			id: 1,
			title: '任务1',
			startDate: '15：00',
			status: 0,
			leader: '韩朵朵',
			score: 93
		}, {
			id: 2,
			title: '任务2',
			startDate: '17：00',
			status: 0,
			leader: '韩朵朵',
			score: 90

		}, ]
	}, {
		id: 3,
		title: '未完成',
		num: 2,
		status: false,
		data: [{
			id: 1,
			title: '任务1',
			startDate: '12：00',
			status: 0,
			leader: '韩朵朵'
		}, {
			id: 2,
			title: '任务2',
			startDate: '114：00',
			status: 0,
			leader: '韩朵朵'
		}, ]
	}, ])
	const listData = ref([])
	const year = ref('2024')
	const month = ref('11')
	const haveDay = ref(31)
	const toDay = new Date().getDate()
	const scrollWidth = ref('')
	onLoad(() => {
		scrollWidth.value = haveDay.value * 100 + 'rpx'
		listData.value = menuList.value[0].data
	})
	const scrollHandler = (e) => {
		console.log('e', e)
	}
	const menuHandler = (el) => {
		menuList.value.forEach(item => {
			item.status = false
		})
		el.status = true
		listData.value = el.data
	}
	const getDaysInMonth = (dateString) => {
		// 创建一个表示指定日期的 Date 对象
		const date = new Date(dateString);

		// 获取月份
		const month = date.getMonth() + 1; // 月份从 0 开始，所以需要加 1

		// 获取指定月份的天数
		const year = date.getFullYear();
		const daysInMonth = new Date(year, month, 0).getDate();

		return daysInMonth;
	}
</script>

<style lang="scss">
	.topBox {
		height: 120rpx;
		display: flex;
		flex-direction: row;
		background-color: #fff;

		.box1 {
			width: 30%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;

			.ptext {
				height: 40%;
				font-size: 1rem;
				line-height: 48rpx;
			}

			button {
				height: 40%;
				line-height: 48rpx;
				font-size: 0.8rem;
				border-radius: 24rpx;
				color: #fff;
				background-color: #409EFF;
			}
		}

		.scrollBox {
			width: 70%;
			height: 110rpx;

			overflow-x: auto;

			.scrollz {
				width: 100%;
				height: 110rpx;
				padding-right: 20rpx;

				.ss {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
				}

				.scrollCard {
					// float: left;
					height: 100%;
					width: 120rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.num {
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						margin-bottom: 20rpx;
						text-align: center;
						background-color: #409EFF;
						border-radius: 50%;
					}

					.cirle {
						width: 20rpx;
						height: 20rpx;
						background-color: #409EFF;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.menu {
		width: 100vw;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;

		.menuCard {
			width: 200rpx;

			.mc {
				width: 80%;
				height: 80rpx;
				border-bottom: 4rpx solid #f0f0f0;
				border-color: #409EFF;
			}
		}
	}

	.list {
		width: 100vw;

		.listCard {
			width: calc(100vw - 40rpx);
			margin: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 40rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.timeBox {
				height: 60rpx;
				width: 100%;
				color: #afafaf;
				display: flex;

				view {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 0.8rem;
					margin-right: 20rpx;

				}

				.stb {
					width: 100rpx;
					border-radius: 10rpx;
					text-align: center;
					color: #ffaa00;
					border: 2rpx solid #ffaa00;
				}
			}
		}
	}
</style>